<template>
  <div class="book-item-A" @click="$bus.$emit('book',id)">
    <img :src="`https://file.ituring.com.cn/SmallCover/${coverKey}`" alt="" />
    <p class="book-name">{{ bookName }}</p>
    <p class="book-author">{{ authors }}</p>
  </div>
</template>

<script>
export default {
  props: ["coverKey", "bookName", "bookAuthors",'id'],
  computed: {
    authors() {
      return this.bookAuthors.map( item => item.name).join(" ");
    },
  },
};
</script>

<style lang="scss" scoped>
.book-item-A {
  box-sizing: border-box;
  padding: 0 20px 15px 0px;
  img {
    margin: 10px 0;
    width: 93px;
    height: 120px;
  }
  p.book-name {
    line-height: 20px;
    width: 95px;
    max-height: 40px;
    overflow: hidden;
    margin: 0 0 5px;
    font-size: 14px;
    color: var(--book-name-font-black);
    text-align: left;
  }
  p.book-author {
    line-height: 20px;
    width: 95px;
    max-height: 20px;
    overflow: hidden;
    font-size: 14px;
    color: var(--more-font-grey);
    text-align: left;
  }
}
</style>